<template>
  <!-- 添加收货地址页面 -->
  <view class="main">
    <view class="xinxi">
      <input
        type="text"
        v-model="name"
        placeholder="请输入收件人（要求实名信息）"
      />
    </view>
    <view class="xinxi">
      <input type="text" v-model="phone" placeholder="请输入收件人手机" />
    </view>
    <view class="xinxi">
      <input type="text" v-model="postCode" placeholder="请输入邮政编码" />
    </view>
    <navigator
      :url="'/pages/per_center/city?shi=' + shi + '&qu=' + qu"
      hover-class="none"
      class="xinxi"
    >
      <input
        type="text"
        v-model="city"
        disabled="true"
        placeholder="选择省市区街道"
      />
    </navigator>
    <view class="xinxi xx">
      <input
        type="text"
        v-model="detailedAddress"
        placeholder="请输入详细地址"
      />
    </view>

    <!-- 是否默认地址 -->
    <view class="reward">
      <view class="content">
        <view class="left">是否设置为默认地址</view>
        <view class="right">
          <switch
            :checked="isReward == 1 ? true : false"
            @change="switch1Change"
          />
        </view>
      </view>
    </view>

    <!-- 底部是否默认地址判断 -->
    <view class="footer" v-if="add == true && ifMoren">
      <view class="queren" @tap="editAddress"> 确认 </view>
    </view>
    <view class="footer" v-else>
      <view class="delete" @tap="deleteAddress" v-if="ifAdd"> 删除 </view>
      <view class="confirm" @tap="editAddress" v-if="add"> 确认 </view>
      <view :class="[ifAdd ? 'confirm' : 'queren']" @tap="save" v-else>
        确认
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      isReward: 0,
      name: "",
      phone: "",
      postCode: "",
      city: "",
      provinceCityCode: "",
      detailedAddress: "",
      add: false,
      ifAdd: true,
      ifMoren: false, // 是否默认地址进来
      id: "",
      shi: "",
      qu: "",
    };
  },
  onShow() {
    const that = this;
    uni.getStorage({
      key: "city",
      success: function (res) {
        that.city = res.data.name;
        that.provinceCityCode = res.data.shiId;
      },
    });
    this.cityData();
    uni.removeStorage({
      key: "city",
      success: function (res) {
        console.log("success");
      },
    });
  },
  onLoad(option) {
    if (option.id) {
      this.id = option.id;
      this.name = option.name;
      this.phone = option.phone;
      this.postCode = option.postCode;
      this.city = option.city;
      this.provinceCityCode = option.provinceCityCode;
      this.detailedAddress = option.detailedAddress;
      if (option.isReward == 1) {
        this.ifMoren = true;
      }
      this.isReward = option.isReward;
      this.add = true;
      console.log(this.isReward);
      this.cityData();
    }
    if (option.add == 1) {
      this.ifAdd = false;
    }
  },
  methods: {
    cityData() {
      const that = this;
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/home/getArea",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          if (res.data.code == 200) {
            if (that.provinceCityCode) {
              let shiList = [];
              let quList = [];
              res.data.data.filter((v) => {
                shiList.push(v.areaCode);
              });
              let shicode = "";
              shicode = that.provinceCityCode.slice(0, 3) + "000";
              let shiIndex = "";
              shiIndex = shiList.indexOf(shicode);
              that.shi = res.data.data[shiIndex].name;

              res.data.data[shiIndex].list.filter((v) => {
                quList.push(v.areaCode);
              });
              let quIndex = "";
              quIndex = quList.indexOf(that.provinceCityCode);
              that.qu = res.data.data[shiIndex].list[quIndex].name;
              console.log(that.shi, that.qu);
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    switch1Change(e) {
      //是否设置为默认地址事件
      if (e.detail.value) {
        this.isReward = 1;
      } else {
        this.isReward = 0;
      }
      console.log(this.isReward);
    },
    // 新增地址
    save() {
      let token = uni.getStorageSync("token");
      const that = this;
      if (this.name == "" || this.name == undefined) {
        uni.showToast({
          title: "请输入姓名",
          duration: 2000,
          icon: "none",
        });
      } else if (this.phone == "" || this.phone == undefined) {
        uni.showToast({
          title: "请输入手机号",
          duration: 2000,
          icon: "none",
        });
      } else if (this.phone && !/^1[3456789]\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "手机号码有误，请重新输入",
          duration: 2000,
          icon: "none",
        });
      } else if (this.postCode == "" || this.postCode == undefined) {
        uni.showToast({
          title: "请输入邮政编码",
          duration: 2000,
          icon: "none",
        });
      } else if (this.postCode && !/^[a-zA-Z0-9 ]{3,12}$/.test(this.postCode)) {
        uni.showToast({
          title: "邮政编码格式错误",
          duration: 2000,
          icon: "none",
        });
      } else if (this.city == "" || this.city == undefined) {
        uni.showToast({
          title: "请选择城市所在地",
          duration: 2000,
          icon: "none",
        });
      } else if (
        this.detailedAddress == "" ||
        this.detailedAddress == undefined
      ) {
        uni.showToast({
          title: "请输入详情地址",
          duration: 2000,
          icon: "none",
        });
      } else {
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/goods/saveOrderAddress",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              receiveName: this.name,
              receivePhone: this.phone,
              postcode: this.postCode,
              provinceCity: this.city,
              provinceCityCode: this.provinceCityCode,
              fullAddress: this.detailedAddress,
              isDefault: this.isReward,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              uni.showToast({
                title: "添加地址成功",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1500);
            } else if (res.data.code == 401) {
              uni.showToast({
                title: "登录失效，请重新授权登录！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    // 编辑地址 app/goods/updateOrderAddress
    editAddress() {
      let token = uni.getStorageSync("token");
      const that = this;
      if (this.name == "" || this.name == undefined) {
        uni.showToast({
          title: "请输入姓名",
          duration: 2000,
          icon: "none",
        });
      } else if (this.phone == "" || this.phone == undefined) {
        uni.showToast({
          title: "请输入手机号",
          duration: 2000,
          icon: "none",
        });
      } else if (this.phone && !/^1[3456789]\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "手机号码有误,请重新输入",
          duration: 2000,
          icon: "none",
        });
      } else if (this.postCode == "" || this.postCode == undefined) {
        uni.showToast({
          title: "请输入邮政编码",
          duration: 2000,
          icon: "none",
        });
      } else if (this.postCode && !/^[a-zA-Z0-9 ]{3,12}$/.test(this.postCode)) {
        uni.showToast({
          title: "邮政编码格式错误",
          duration: 2000,
          icon: "none",
        });
      } else if (this.city == "" || this.city == undefined) {
        uni.showToast({
          title: "请选择城市所在地",
          duration: 2000,
          icon: "none",
        });
      } else if (
        this.detailedAddress == "" ||
        this.detailedAddress == undefined
      ) {
        uni.showToast({
          title: "请输入详情地址",
          duration: 2000,
          icon: "none",
        });
      } else {
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/goods/updateOrderAddress",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              id: this.id,
              receiveName: this.name,
              receivePhone: this.phone,
              postcode: this.postCode,
              provinceCity: this.city,
              provinceCityCode: this.provinceCityCode,
              fullAddress: this.detailedAddress,
              isDefault: this.isReward,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              uni.showToast({
                title: "修改地址成功",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1500);
            } else if (res.data.code == 401) {
              uni.showToast({
                title: "登录失效，请重新授权登录！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    //地址删除
    deleteAddress() {
      uni.showModal({
        title: "提示",
        content: "是否删除该收货地址",
        success: (re) => {
          if (re.confirm) {
            let token = uni.getStorageSync("token");
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url: "app/goods/deleteAddress",
                method: "POST",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": "1.3.3",
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  id: this.id,
                },
              }).then((res) => {
                if (res.data.code == 200) {
                  uni.showToast({
                    title: "删除成功",
                    duration: 1500,
                    icon: "none",
                  });
                  setTimeout(() => {
                    uni.navigateBack({
                      delta: 1,
                    });
                  }, 1000);
                  // this.findList = res.data.data
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 0 32rpx;
  box-sizing: border-box;
  .xinxi {
    width: 100%;
    height: 90rpx;
    border-radius: 8rpx;
    border: 1rpx solid #dddddd;
    margin-top: 36rpx;
    display: flex;
    align-items: center;
    padding: 0 36rpx;
    box-sizing: border-box;

    input {
      width: 100%;
    }
  }

  .reward {
    margin-top: 36rpx;

    .content {
      padding: 0;
      height: 85rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      .right {
        display: flex;
        align-items: center;
        width: 102rpx;
        height: 62rpx;
      }
    }
  }

  .footer {
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0 32rpx;
    // position: fixed;
    // bottom: 0;
    // left: 0;
    margin-top: 350rpx;
    border-top: 1rpx solid #eeeeee;
    box-sizing: border-box;
    background-color: #ffffff;
    .delete,
    .confirm {
      width: 326rpx;
      height: 74rpx;
      border-radius: 37rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      text-align: center;
      line-height: 74rpx;
    }

    .delete {
      border: 1rpx solid #2168eb;
      color: #2168eb;
    }

    .confirm {
      background-color: #2168eb;
      color: #ffffff;
    }

    .queren {
      width: 686rpx;
      height: 74rpx;
      background: #2168eb;
      border-radius: 46rpx;
      color: #ffffff;
      text-align: center;
      line-height: 74rpx;
      font-size: 26rpx;
    }
  }
}
</style>
